

<div class="layui-form" id="form" lay-filter="supplier_edit" >
    <div class="form-cont">
        <div class="layui-form-item verify">
            <label class="layui-form-label">供货商用户名</label>
            <div class="layui-input-block">
                <input type="text" verify="requirel5" :disabled="type==1?false:true" autocomplete="off" v-model="detail.supplier_name" placeholder="请输入供货商用户名" class="layui-input">
                <span class="hint">供货商用户名必填</span>
            </div>
        </div>
        <div class="layui-form-item verify" v-if="type!=3">
            <label class="layui-form-label">登录密码</label>
            <div class="layui-input-block">
                <input type="text" autocomplete="off" v-model="detail.pwd" :verify='type==1?"require|pass":"pass"' :placeholder="type==1?'请设置登录密码':'修改密码'" class="layui-input">
                <span class="hint">登录密码必填</span>
            </div>
        </div>
        <div class="layui-form-item verify" v-if="type!=3">
            <label class="layui-form-label">提现密码</label>
            <div class="layui-input-block">
                <input type="text" autocomplete="off" v-model="detail.withdraw_pwd" :verify='type==1?"require|pass":"pass"' :placeholder="type==1?'请设置提现密码':'修改密码'" class="layui-input">
                <span class="hint">提现密码必填</span>
            </div>
        </div>
        <div class="layui-form-item verify">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" v-model="detail.real_name" verify="require|realname" placeholder="请输入真实姓名" class="layui-input">
                <span class="hint">姓名必填</span>
            </div>
        </div>
        <div class="layui-form-item verify">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <div class="layui-unselect layui-form-select">
                    <div class="layui-select-title"><input type="text" name='sex' :data='detail.sex' verify="require" placeholder="请选择性别" class="layui-input layui-unselect" readonly><i
                            class="layui-edge"></i></div>
                    <dl class="layui-anim layui-anim-upbit">
                        <dd class="layui-select-tips layui-this">请选择性别</dd>
                        <dd data='1'>男</dd>
                        <dd data='2'>女</dd>
                    </dl>
                </div>
                <span class="hint">性别必选</span>
            </div>
        </div>
        <div class="layui-form-item verify">
            <label class="layui-form-label">身份证号</label>
            <div class="layui-input-block">
                <input type="text" v-model="detail.card_id" verify="require|card" placeholder="请输入身份证号" class="layui-input">
                <span class="hint">身份证号必填</span>
            </div>
        </div>
        <div class="layui-form-item verify">
            <label class="layui-form-label">身份证照片</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="upload" v-show="!photo">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <div class="flex img-box" v-if="photo">
                    <span @click="photo=''">x</span>
                    <img :src="photo">
                </div>
                <input type="hidden" verify="require" v-model="photo"/>
                <span class="hint" v-if="!photo">身份证照片必传</span>
            </div>
        </div>
        <div class="layui-form-item verify">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
                <input type="text" v-model="detail.tel" verify="require|phone" placeholder="请输入电话" class="layui-input">
                <span class="hint">电话必填</span>
            </div>
        </div>
        <div class="layui-form-item verify">
            <label class="layui-form-label">住址</label>
            <div class="layui-input-block">
                <input type="text" v-model="detail.address" verify="require" placeholder="请输入住址" class="layui-input">
                <span class="hint">住址必填</span>
            </div>
        </div>
        <div class="layui-form-item verify">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" v-model="detail.email" lay-verify="required" placeholder="请输入邮箱" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item verify">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <div class="layui-unselect layui-form-switch" :class="{'layui-form-onswitch':detail.status==1}" lay-skin="_switch" @click="radioF()"><em>{{detail.status==1?'启用':'停用'}}</em><i></i></div>
            </div>
        </div>
    </div>
    <div class="form-btn" v-if="type!=3">
        <input type="button" value="保存" class="layui-btn" @click="submit">
    </div>
</div>
<style type="text/css">
    .img-box{
        width: 60px;
        height: 60px;
        border: 1px solid #eee;
        position: relative;
    }
    .img-box img{
        max-width: 100%;
        max-height: 100%;
    }
    .img-box span{
        position: absolute;
        width: 15px;
        line-height: 15px;
        text-align: center;
        font-family: arial;
        top: -8px;
        right: -8px;
        border-radius: 50%;
        background: rgba(0,0,0,.5);
        color:#fff;
        font-size: 12px;
        cursor: pointer;
    }
    .form-cont{
        overflow: auto;
    }
</style>
<script>
    layui.use(['form','upload','layer'], function(){
        var $ = layui.$
            ,form = layui.form,upload=layui.upload, layer = layui.layer;
        form.verify(layui.admin.verify);
        var forms=new Vue({
            el:'#form',
            data:{
                role:[],
                type:layui.admin.objData.type,
                detail:{
                    status:1,
                    sex:'',
                    card_photo:'',
                },
                photo:'',
                old_detail:{},
                role_name:'',
                upload:'',
                layer:'',
                photos:false
            },
            mounted() {
                var _this=this;
                //初始化
                if(this.type!=1) this.detail=layui.admin.objData.detail,this.old_detail=JSON.stringify(layui.admin.objData.detail),this.photo=layui.conf.url+this.detail.card_photo;
                layui.admin.supplier=this.detail;
                /* this.cityF({}); */
                if(this.detail.sex==1){
                    this.sex='男';
                }else if(this.detail.sex==2){
                    this.sex='女';
                }else if(this.detail.sex===0){
                    this.sex='保密';
                }
                $('input[name="sex"]').val(this.sex);
                //身份证上传
                this.upload=upload.render({
                    elem: '#upload' ,//绑定元素
                    field:'image',
                    accept:'images',
                    data:{type:1},
                    auto:false,
                    url: layui.conf.ajaxUrl+'login/upload_img'
                    //,data:{module:'notice',folder:'/cat/logo'}
                    ,choose: function(obj){
                        obj.preview(function(index, file, result){
                            _this.photo=result;
                            _this.photos=true;
                        });
                    }
                    ,done: function(res){
                        _this.detail.card_photo=res.data.img_url;
                        layer.close(_this.layer);
                        _this.submits();
                    }
                    ,error: function(){}
                });
            },
            methods:{
                radioF:function(){//radio选择
                    this.detail.status==1?this.detail.status=2:this.detail.status=1;
                },

                submit:function(){
                    if(layui.admin.form('#form')){
                        if(this.photos){
                            this.layer=layer.load(1);
                            this.upload.upload();
                        }else{
                            this.submits();
                        }
                    }
                },
                submits:function(){
                    this.detail.sex=parseInt($('input[name="sex"]').attr('data'));
                    if(this.type==2){   //编辑
                        var data=layui.admin.filter(this.detail,JSON.parse(this.old_detail),'supplier_id');

                        if(data){
                            layui.admin.formapi('supplier/update',data);
                        }
                    }else{  //添加

                        layui.admin.formapi('supplier/add',this.detail);
                    }
                }
            }
        })
    });
</script>
